// 导入数据
const { cardCategories, colors, polyhedronFaces } = window.cardData || {
    // 提供默认数据，以防导入失败
    cardCategories: {
        animals: {
            name: "复习",
            items: ["叔叔","阿姨","游玩","草地","花园","大树","小屋","小河","高兴","爸爸","妈妈","爷爷","奶奶","外公","外婆","宝宝"]
        }
    },
    colors: ['from-blue-500 to-indigo-600'],
    polyhedronFaces: [{ text: '你好', color: 'from-blue-500 to-indigo-600' }]
};

// 导入Vue函数
const { createApp, ref, onMounted, onUnmounted } = Vue;

createApp({
    setup() {
        // 游戏状态
        const currentCategory = ref('animals');
        const flippedCards = ref(0);
        const totalCards = ref(0);
        const cards = ref([]);
        const isButtonPressed = ref(false);
        const isScrolled = ref(false);
        
        // 游戏模式
        const currentGameMode = ref('cards'); // 'cards' 或 'polyhedron'
        
        // 多面体游戏状态
        const polyhedronTransform = ref('rotateX(0deg) rotateY(0deg)');
        const isRotating = ref(false);
        const recentItems = ref([]);
        
        // 获取多面体每个面的样式 - 正方体版本
        const getFaceStyle = (index) => {
            const size = 200; // 正方体大小
            const offset = size / 2;
            
            // 为6个面定义正确的位置和旋转角度，形成正方体
            const positions = [
                { transform: `translateZ(${offset}px)` },            // 前面
                { transform: `rotateY(180deg) translateZ(${offset}px)` }, // 后面
                { transform: `rotateY(90deg) translateZ(${offset}px)` },  // 右面
                { transform: `rotateY(-90deg) translateZ(${offset}px)` }, // 左面
                { transform: `rotateX(90deg) translateZ(${offset}px)` },  // 上面
                { transform: `rotateX(-90deg) translateZ(${offset}px)` }  // 下面
            ];
            
            return positions[index] || positions[0];
        };
        
        // 旋转多面体 - 正方体版本
        const rotatePolyhedron = () => {
            if (isRotating.value) return;
            
            isRotating.value = true;
            
            // 随机选择一个面（现在有6个面）
            const randomFaceIndex = Math.floor(Math.random() * polyhedronFaces.length);
            const selectedFace = polyhedronFaces[randomFaceIndex];
            
            // 添加到最近显示的项目
            recentItems.value.unshift(selectedFace.text);
            if (recentItems.value.length > 10) {
                recentItems.value.pop();
            }
            
            // 计算旋转角度，使得选中的面朝向用户
            let targetRotationX = 0;
            let targetRotationY = 0;
            
            // 根据选中的面设置不同的旋转角度（正方体6个面的角度）
            switch (randomFaceIndex) {
                case 0: targetRotationX = 0; targetRotationY = 0; break;       // 前面
                case 1: targetRotationX = 0; targetRotationY = 180; break;     // 后面
                case 2: targetRotationX = 0; targetRotationY = -90; break;     // 右面
                case 3: targetRotationX = 0; targetRotationY = 90; break;      // 左面
                case 4: targetRotationX = -90; targetRotationY = 0; break;     // 上面
                case 5: targetRotationX = 90; targetRotationY = 0; break;      // 下面
            }
            
            // 其余旋转动画逻辑保持不变
            // 添加一些随机旋转使动画更有趣
            const randomSpinX = Math.floor(Math.random() * 360);
            const randomSpinY = Math.floor(Math.random() * 360);
            
            // 先快速旋转多圈，然后停在目标位置
            setTimeout(() => {
                polyhedronTransform.value = `rotateX(${randomSpinX}deg) rotateY(${randomSpinY}deg)`;
                
                setTimeout(() => {
                    polyhedronTransform.value = `rotateX(${targetRotationX}deg) rotateY(${targetRotationY}deg)`;
                    
                    setTimeout(() => {
                        isRotating.value = false;
                    }, 1000);
                }, 500);
            }, 100);
        };
        
        // 切换游戏模式
        const switchGameMode = (mode) => {
            currentGameMode.value = mode;
            if (mode === 'cards') {
                generateCards(currentCategory.value);
            }
        };
        
        // 生成随机ID
        const generateId = () => Math.random().toString(36).substr(2, 9);
        
        // 随机选择背景颜色
        const getRandomColor = () => colors[Math.floor(Math.random() * colors.length)];
        
        // 翻转卡片
        const flipCard = (card) => {
            if (card.flipped) return;
            
            // 触发主要闪光特效
            card.isShining = true;
            
            // 触发额外的发光效果
            card.isGlowing = true;
            
            // 翻转卡片
            card.flipped = true;
            flippedCards.value++;
            
            // 在动画完成后移除特效
            setTimeout(() => {
                card.isShining = false;
            }, 800);
            
            setTimeout(() => {
                card.isGlowing = false;
            }, 500);
        };
        
        // 生成卡片
        const generateCards = (category = 'animals') => {
            // 清空卡片数组
            cards.value = [];
            
            // 获取当前类别的卡片内容
            const categoryData = cardCategories[category];
            if (!categoryData) return;
            
            // 随机选择适当数量的项目（根据屏幕大小）
            const screenWidth = window.innerWidth;
            let cardCount = 6; // 更小的默认值，适合小屏幕
            if (screenWidth >= 360) cardCount = 8;
            if (screenWidth >= 640) cardCount = 12;
            if (screenWidth >= 768) cardCount = 12;
            if (screenWidth >= 1024) cardCount = 12;
            
            // 随机排序并选择卡片
            const shuffledItems = [...categoryData.items].sort(() => Math.random() - 0.5);
            const selectedItems = shuffledItems.slice(0, cardCount);
            
            // 更新游戏状态
            totalCards.value = selectedItems.length;
            flippedCards.value = 0;
            
            // 创建卡片对象
            cards.value = selectedItems.map(item => ({
                id: generateId(),
                text: item,
                flipped: false,
                isShining: false,
                isGlowing: false,
                color: getRandomColor()
            }));
        };
        
        // 新游戏 - 适应两种游戏模式
        const newGame = () => {
            if (currentGameMode.value === 'cards') {
                generateCards(currentCategory.value);
            } else {
                rotatePolyhedron();
            }
            
            // 按钮动画
            isButtonPressed.value = true;
            setTimeout(() => {
                isButtonPressed.value = false;
            }, 200);
        };
        
        // 切换类别
        const changeCategory = (category) => {
            currentCategory.value = category;
            generateCards(category);
        };
        
        // 窗口滚动事件处理
        const handleScroll = () => {
            isScrolled.value = window.scrollY > 10;
        };
        
        // 窗口大小改变事件处理
        const handleResize = () => {
            generateCards(currentCategory.value);
        };
        
        // 生命周期钩子
        onMounted(() => {
            generateCards(currentCategory.value);
            window.addEventListener('scroll', handleScroll);
            window.addEventListener('resize', handleResize);
        });
        
        onUnmounted(() => {
            window.removeEventListener('scroll', handleScroll);
            window.removeEventListener('resize', handleResize);
        });
        
        return {
            cardCategories,
            currentCategory,
            flippedCards,
            totalCards,
            cards,
            isButtonPressed,
            isScrolled,
            flipCard,
            newGame,
            changeCategory,
            currentGameMode,
            polyhedronTransform,
            isRotating,
            recentItems,
            polyhedronFaces,
            getFaceStyle,
            rotatePolyhedron,
            switchGameMode
        };
    }
}).mount('#app');

// 将数据挂载到window对象，以便app.js访问 - 这部分已移至cardData.js文件
// window.cardData = {...};
